// 获取首页数据
async function getData() {
  // 发送请求
  try {
    const res = await axios.get("/dashboard");
    // 解构首页中所需要的数据
    const { groupData, overview, provinceData, salaryData, year } = res.data;
    // 渲染概览区域
    renderOverview(overview);
    salaryDatabase(year);
  } catch (e) {
    console.dir(e.response);
  }
}

getData();

// 渲染概览区域
function renderOverview(data) {
  // console.log(data);
  for (const k in data) {
    // 对象的键刚好等于标签name属性的值
    document.querySelector(`[name="${k}"]`).innerHTML = data[k];
  }
}

function salaryDatabase(data) {
  console.log(data);
  var chartDom = document.getElementById("line");
  var myChart = echarts.init(chartDom);

  const option = {
    title: {
      text: "2021全学科薪资走势",
      textStyle: {
        color: "#BA55D3",
        fontsize: 30,
      },
    },

    grid: {
      left:"15%",
      top:"15%"
    },
    tooltip: {
      // 按照坐标轴触发
      trigger: "axis",
      axisPointer: {
        type: "cross",
        label: {
          backgroundColor: "#6a7985",
        },
      },
    },
    xAxis: {
      type: "category",
      data: data.map((item) => item.month),
    },
    yAxis: {
      type: "value",
      splitLine: {
        lineStyle: {
          type: "dashed",
        },
      },
    },
    series: [
      {
        data: data.map((item) => item.salary),
        type: "line",
        smooth: true,
        lineStyle: {
          color: "#5aaafe",
          width: 7,
        },
        symbolSize: 10,
        itemStyle: {
          color: "#5aaafe",
        },
        areaStyle: {
          color: {
            type: "linear",
            x: 0,
            y: 0,
            x2: 0,
            y2: 1,
            colorStops: [
              {
                offset: 0,
                color: "#5aaafe", // 0% 处的颜色
              },
              {
                offset: 0.8,
                color: "#fff", // 100% 处的颜色
              },
            ],
            global: false, // 缺省为 false
          },
        },
      },
    ],
  };

  myChart.setOption(option);
}
